<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新帖子</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="./css/longarticle.min.css">
    <link rel="stylesheet" href="./public/font2/iconfont.css">
    <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
    <style>
        #editor—wrapper {
            border: 1px solid #ccc;
            z-index: 100;
            /* 按需定义 */
        }

        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }

        #editor-container {
            height: 600px;
            overflow: auto;
        }
    </style>
</head>

<body>
    <div class="article-nav">
        <!-- 弹出框 -->
        <div class="popup-box">
            <div class="box-one"></div>
        </div>
        <!-- 头部导航 -->
        <div class="main">
            <!-- 导航 -->
            <div class="nav">
                <ul class="layui-nav" id="layui-nav-span-l">
                    <a href="./index.html" class="logo">
                        <img src="./images/web-app-logo.webp" alt="">
                    </a>
                </ul>
                <div class="nav-search">
                    <div class="input-wrap">
                        <div class="nav-icon">
                            <i class="iconfont">&#xe622;</i>
                            <span>搜索</span>
                        </div>
                        <input type="text" id="search-input">
                    </div>
                    <div class="search-box">请输入搜索关键词</div>
                </div>
                <ul class="layui-nav" id="layui-nav-span-r">
                    <li class="layui-nav-item">
                        <a href=""><i class="iconfont">&#xe73c;</i></a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="" class="scroll-wrapper">
                            <i class="iconfont">&#xe60b;</i>
                            <div class="infinite-container">
                                <div class="infinite-spinner">
                                    <div class="prompt">
                                        没有更多了
                                    </div>
                                </div>
                                <div class="infinite-fade">
                                    <p class="link">全部已读</p>
                                    <p class="link">删除已读</p>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="layui-nav-item show">
                        <a href="./mypage.html"><img src="./images/avater3.jfif" class="layui-nav-img">
                            <span class="nkname">克施勤德</span>
                        </a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a href="./mypage.html">
                                    <i class="iconfont">&#xe60d;</i>
                                    我的主页
                                </a>
                            </dd>
                            <dd>
                                <a href="./supports.html">
                                    <i class="iconfont">&#xe60a;</i>
                                    我的帖子
                                </a>
                            </dd>
                            <dd>
                                <a href="./collect_s.html">
                                    <i class="iconfont">&#xe8c6;</i>
                                    我的收藏
                                </a>
                            </dd>
                            <dd>
                                <a href="javascript:;">
                                    <i class="iconfont">&#xe78a;</i>
                                    我的订单
                                </a>
                            </dd>
                            <dd>
                                <a href="javascript:;">
                                    <i class="iconfont">&#xe6d7;</i>
                                    MYKB设计
                                </a>
                            </dd>
                            <dd>
                                <a href="./adminlogin.html">
                                    <i class="iconfont">&#xe650;</i>
                                    后台管理
                                </a>
                            </dd>
                            <dd>
                                <a href="./index.html" class="logout">
                                    <i class="iconfont">&#xe60c;</i>
                                    退出登录
                                </a>
                            </dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item leave">
                        <a href="./login.html" class="login">登录/注册</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="article-centent">
        <!-- 划出框 -->
        <div class="article-slide">
            <!-- 上面的内容 -->
            <div class="slide-top">
                <div class="community">
                    <ul>
                        <li class="change">
                            <span class="iconfont icon-tx-pinghangsibianxing"></span>
                            <span>社区</span>
                        </li>
                        <li class="change">
                            <span class="iconfont icon-rijiben"></span>
                            <span>发车日记</span>
                        </li>
                        <li class="change">
                            <span class="iconfont icon-xingzhuang-sanjiaoxing"></span>
                            <span>装备商店</span>
                        </li>
                    </ul>
                </div>
                <hr>
                <div class="mechanical">
                    <ul>
                        <li class="mechanical-keydorw change">
                            <span class="iconfont icon-jianpan"></span>
                            <span>机械键盘</span>
                        </li>
                        <li class="movebelow">
                            <div>
                                <span class="iconfont icon-rijiben"></span>
                                键盘定制
                            </div>
                            <div>
                                <span class="iconfont icon-rijiben"></span>
                                键帽库
                            </div>
                        </li>
                        <li class="move change">
                            <span class="iconfont icon-pc6"></span>
                            <span>PC装机</span>
                        </li>
                        <li class="move change">
                            <span class="iconfont icon-erji"></span>
                            <span>视听HiFi</span>
                        </li>
                        <li class="move change">
                            <span class="iconfont icon-yingshi"></span>
                            <span>摄影</span>
                        </li>
                        <li class="move change">
                            <span class="iconfont icon-jubutianchongwuduandian-1"></span>
                            <span>数码</span>
                        </li>
                        <li class="move change">
                            <span class="iconfont icon-xiaoren"></span>
                            <span>潮玩模型</span>
                        </li>
                        <li class="move change">
                            <span class="iconfont icon-kafei"></span>
                            <span>前线生活</span>
                        </li>
                        <li class="move change">
                            <span class="iconfont icon-zhizhen"></span>
                            <span>头文字Z</span>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 下面的内容 -->
            <div class="slide-buttom"></div>
        </div>

        <div class="article-box-big">
            <!-- 文章标题 -->
            <div class="article-title">
                <input class="input-title" type="text" placeholder="给文章起一个标题">
            </div>
            <hr>
            <!-- 选择标签框 -->
            <div class="article-panel">
                <!-- 发布到的圈子 -->
                <div class="circle">
                    <div class="top">
                        <div class="big">
                        </div>
                        <div>发布到的圈子,选择的圈子：</div>
                    </div>
                    <div class="input"><input type="text" value="装备签到">
                        <input type="hidden" value="">
                    </div>
                </div>
                <!-- 选择框 -->
                <div class="selet-circle">
                    <ul>
                        <li>
                            <div class="big">
                            </div>
                            <div class="clickli" data-cid="1">机械键盘</div>
                        </li>
                        <li>
                            <div class="big">
                            </div>
                            <div class="clickli" data-cid="2">PC装机</div>
                        </li>
                        <li>
                            <div class="big">
                            </div>
                            <div class="clickli" data-cid="3">视听HiFi</div>
                        </li>
                        <li>
                            <div class="big">
                            </div>
                            <div class="clickli" data-cid="4">摄影</div>
                        </li>
                        <li>
                            <div class="big">
                            </div>
                            <div class="clickli" data-cid="5">数码</div>
                        </li>
                        <li>
                            <div class="big">
                            </div>
                            <div class="clickli" data-cid="6">潮玩模型</div>
                        </li>
                        <li>
                            <div class="big">
                            </div>
                            <div class="clickli" data-cid="7">前线生活</div>
                        </li>
                        <li>
                            <div class="big">
                            </div>
                            <div class="clickli" data-cid="8">头文字Z</div>
                        </li>
                        <li>
                            <div class="big">
                            </div>
                            <div class="clickli" data-cid="9">游戏</div>
                        </li>
                    </ul>
                </div>
                <!-- 添加的装备 -->
                <div class="equipmenp">添加装备<span>></span></div>
            </div>
            <!-- 文本编辑器 -->
            <div class="circle-button content">
                <div id="editor—wrapper">
                    <div id="toolbar-container">
                        <!-- 工具栏 -->
                    </div>
                    <div id="editor-container">
                        <!-- 编辑器 -->
                    </div>
                </div>
            </div>
            <!-- 发布按钮 -->
            <div class="circle-button btn">
                <div class="issue-button">发布</div>
                <!-- 存草稿 -->
                <div class="save-draft">存草稿</div>
                <!-- 后面存放地址 -->


                <div class="draft-a">查看存稿箱</div>
            </div>
        </div>
    </div>

    <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js"></script>
    <script src="./js/nav.js"></script>
    <script src="./js/article.js"></script>
    <script src="./js/draft.js"></script>

    <script>
        const { createEditor, createToolbar } = window.wangEditor

        let html = '';
        let text = '';
        const editorConfig = {
            placeholder: 'Type here...',
            onChange(editor) {
                html = editor.getHtml(),
                    text = editor.getText()
                console.log(html, text)
            },
            MENU_CONF: {}

        }
        //上传图片配置
        editorConfig.MENU_CONF['uploadImage'] = {
            server: '/api/upload',
            allowedFileTypes: []
        }

        const editor = createEditor({
            selector: '#editor-container',
            html: '<p><br></p>',
            config: editorConfig,
            mode: 'default',
        })

        const toolbarConfig = {}

        const toolbar = createToolbar({
            editor,
            selector: '#toolbar-container',
            config: toolbarConfig,
            mode: 'default',
        })
    </script>
    <script src="./js/al.js"></script>
</body>

</html>